<template>
    <div>
        <div style="margin-bottom:65px;">
            <div v-for="(coupon, index) in coupons" :key="index">
                <div class="card" @click="click1(coupon.id,index)">
                    <van-row>
                        <van-col span="6">
                            <div>
                                <p v-if="coupon.coupon_type=='CASH'">
                                    <span style="color:red;font-size:12px;">￥</span>
                                    <span style="color:red">{{coupon.coupon_tpl.reduce_cost/100}}</span>
                                </p>
                                <p v-if="coupon.coupon_type=='DISCOUNT'">
                                    <span style="color:red">{{coupon.coupon_tpl.discount/10.0}} 折</span>
                                </p>
                            </div>
                            <div style="font-size:12px;">
                                <span v-if="coupon.coupon_type=='CASH'" style="color:#cccccc">
                                    满{{coupon.coupon_tpl.least_cost/100}}元可用
                                </span>
                                <span v-if="coupon.coupon_type=='DISCOUNT'" style="color:#cccccc">
                                    不限金额
                                </span>
                            </div>
                        </van-col>

                        <van-col span="12">
                            <div style="font-size:14px;">
                                <p v-if="coupon.coupon_type=='CASH'">
                                    <span v-if="sub_item_total<coupon.coupon_tpl.least_cost" style="color:#cccccc">
                                    {{coupon.title}}
                                </span>
                                    <span v-if="sub_item_total>=coupon.coupon_tpl.least_cost">
                                    {{coupon.title}}
                                </span>
                                </p>
                                <p v-if="coupon.coupon_type=='DISCOUNT'">
                                    <span >
                                        {{coupon.title}}</span>
                                </p>
                            </div>
                            <span style="font-size:12px;color:#cccccc">
                            {{coupon.begin_time}} 到 {{coupon.end_time}}
                            </span>
                        </van-col>

                        <van-col span="6">
                            <div style="margin-top: 12px;">
                                <van-icon name="check" v-if="index!=select_index" size="20px" style="float:right;"/>
                                <van-icon name="checked" v-if="index==select_index" size="20px" style="float:right;"/>
                            </div>
                        </van-col>
                    </van-row>

                </div>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="operate-bar">
            <div class='gouwuche'>
                <div style="float:left;padding-left:10px;">已选择：<span v-text="coupon.title"></span></div>
            </div>
            <div class="submit-btn" @click='submit'>
                <div class="submit-btn-label">确定</div>
            </div>
        </div>
    </div>
</template>

<script>
    import _ from 'lodash'
    import api from '@/utils/api'
    import {mapGetters} from 'vuex'

    export default {
        data() {
            return {
                coupons: [],
                id: '',
                shop_id: 0,
                sub_item_total: 0,
                coupon: {
                    title: ""
                },
                select_index: -1,
            }
        },
        computed: {
            ...mapGetters([
                'user',
                'micro_pay_coupon',
            ])
        },
        onLoad(options) {
            if (options) {
                this.sub_item_total = options.sub_item_total
                this.shop_id = options.shop_id
            }
        },
        methods: {
            submit() {
                this.$store.dispatch("setMicroPayCoupon", this.coupon)
                wx.navigateBack({
                    delta: 1
                })
            },
            click1(id, index) {
                console.log(id)
                if (id && id > 0) {
                    api.getPayCenterMricoPrepay({
                        shop_id: this.shop_id,
                        user_id: this.user.id,
                        pay_amount: this.sub_item_total,
                        coupon_id: id
                    }).then(res => {
                        if (res.code == 0) {
                            // this.id=id
                            this.coupon = _.find(this.coupons, ['id', id])
                            this.select_index = index
                        } else {
                            this.showToast(res.msg)
                        }
                    })
                }
            },
            radioChange(e) {
                let id = parseInt(e.target.value)
                if (id && id > 0) {
                    api.getPayCenterPrepay({
                        shop_id: this.shop_id,
                        user_id: this.user.id,
                        pay_amount: this.sub_item_total,
                        coupon_id: id
                    }).then(res => {
                        if (res.code == 0) {
                            // this.id=id
                            this.coupon = _.find(this.coupons, ['id', id])

                        } else {
                            this.showToast(res.msg)
                        }
                    })
                }
            },
            showToast(msg) {
                wx.showToast({
                    title: msg,
                    icon: 'none'
                })
            },
            handletabContents(arrayCoupons) {
                this.coupons = []
                arrayCoupons.forEach(item => {
                    if (item.coupon_type == "DISCOUNT" || item.coupon_type == "CASH") {

                        item.begin_time = this.formatDate(item.begin_time)
                        item.end_time = this.formatDate(item.end_time)
                        // item.coupon_type = this.handle_coupon_type(item.coupon_type)
                        this.coupons.push(item)
                    }
                })
                wx.hideLoading()
            },
            formatDate(val) {
                const date = new Date(val)
                const year = date.getFullYear()
                const month = date.getMonth() + 1
                const day = date.getDate()
                return year + '-' + month + '-' + day
            },
            handle_coupon_type(type) {
                switch (type) {
                    case 'CASH':
                        return '现金券'
                        break;
                    case 'DISCOUNT':
                        return '折扣券'
                        break;
                    // case 'PRODUCT':
                    //   return '商品券'
                    //   break;
                    // case 'BUY_N_GIVE_M':
                    //   return '买n送m券'
                    //   break;
                    // case 'SECOND_HALF_PRICE':
                    //   return '第二杯半价券'
                    //   break;
                    // default:
                    //   return '特权券'
                }
            }
        },

        beforeMount() {
            wx.showLoading({
                title: '加载中',
            })
            api.findCoupons({
                openid: this.user.open_id,
                brand_id: this.user.brand_id,
                status: 'grant'
            }).then(grantCoupons => {
                if (grantCoupons.code == 0) {
                    this.handletabContents(grantCoupons.data)
                }
            })
        }
    }
</script>

<style>
    page {
        background: #EAEAEA;
    }

    .leftRadio {
        width: 10%;
        margin-left: 15px;
    }

    .card {
        width: 90%;
        margin: 10px 10px 0px 10px;
        background: white;
        border-radius: 5px;
        text-align: center;
        vertical-align: middle;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-right: 15px;
    }

    .operate-bar {
        z-index: 1001;
        position: fixed;
        bottom: 0px;
        height: 55px;
        line-height: 55px;
        width: 100%;
        display: flex;
    }

    .gouwuche {
        width: 70%;
        background: white;
        height: 100%;
    }

    .submit-btn {
        height: 100%;
        background: black;
        width: 30%;
        display: flex;
    }

    .submit-btn-label {
        color: white;
        font-size: 20px;
        margin: auto;
    }
</style>
